<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div v-for="(item,index) in list"
             :key="index"
             :class="{sta:ind==index}"
             @click="stab(index)">{{item}}</div>
      </div>
      <div class="ul2">
      </div>
    </div>
    <div class="qie">
      <div class="cai"
           v-if="table">
        <el-table :data="table"
                  @cell-click='cellclick'
                  style="width: 100%">
          <el-table-column prop="orderSn"
                           label="订单编号"
                           align="center">
          </el-table-column>
          <el-table-column prop="caAt"
                           label="下单时间"
                           align="center">
          </el-table-column>
          <el-table-column prop="shopName"
                           label="店铺名称"
                           align="center">
          </el-table-column>
          <el-table-column prop="imgurl"
                           label="商品图片"
                           align="center">
            <template slot-scope="scope">
              <img class="img1"
                   :src="scope.row.imgurl" />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName"
                           label="商品名称"
                           align="center">
          </el-table-column>
          <el-table-column prop="productName"
                           label="规格"
                           align="center">
          </el-table-column>
          <el-table-column prop="total"
                           label="数量"
                           width="50"
                           align="center">
          </el-table-column>
          <el-table-column prop="payment"
                           label="总价（￥）"
                           align="center">
          </el-table-column>
          <el-table-column prop="status"
                           label="状态"
                           align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status==0"
                   class="color1">
                待审批
              </div>
              <div v-else-if="scope.row.status==1"
                   class="color2">
                通过
              </div>
              <div v-else-if="scope.row.status==2"
                   class="color3">
                拒绝
              </div>
              <div v-else
                   class="color2">
                {{scope.row.status}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="caozuo"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="is(scope.row,0)">通过</el-dropdown-item>
                  <el-dropdown-item @click.native="is(scope.row,1)">拒绝</el-dropdown-item>
                  <el-dropdown-item @click.native="del(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <template slot="empty">
            <div style="height:92px;line-height:92px;">暂无订单</div>
          </template>
        </el-table>
      </div>
      <el-pagination background
                     layout="prev, pager, next"
                     :total="total"
                     @current-change="handleCurrentChange"
                     prev-text="上一页"
                     next-text="下一页"
                     class="aut">
        <!-- :hide-on-single-page="true" -->
      </el-pagination>
    </div>
    <!-- <el-dialog title="订单详情"
               :visible.sync="dialog"
               class="dialog">
      <div class="zhuangtai">
        <div class="a">当前状态：付款成功</div>
        <div class="b">提交订单时间:2020-12-12 13:00:00</div>
      </div>
      <div class="zhuangtai na">
        <div class="c">
          <div>订单信息</div>
          <div>订单编号:1325951964377857978</div>
          <div>付款时间:2020-10-26 09:57:19</div>
        </div>
        <div>创建时间:2020-10-26 09:57:06</div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                :header-cell-style="{background:'#EEEEEE'}">
        <el-table-column prop="img"
                         label="商品图片"
                         align="center">
          <template slot-scope="scope">
            <img class="img2"
                 :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="商品名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="sum"
                         label="数量"
                         align="center">
        </el-table-column>
        <el-table-column prop="zong"
                         label="总价"
                         align="center">
        </el-table-column>
        <el-table-column prop="jin"
                         label="金额"
                         align="center">
        </el-table-column>
        <el-table-column prop="sta"
                         label="状态"
                         align="center">
          <template slot-scope="scope">
            <div v-if="scope.$index%2==0"
                 class="one1">
              2365892
            </div>
            <div v-else
                 class="one2">
              未审批
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="danger"
                   v-if='true'
                   @click="tui">拒绝</el-button>
        <el-button type="primary"
                   v-if='true'
                   @click="dialog=false">同意</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      ind: 0,
      page: 1,//页数
      total: 0,//条数
      list: ['待审批', '已审批'],
      table: [],
      dialog: false,
      tableData: [{
        img: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        name: 'DJ3E全电脑三臂凿岩台车',
        sum: '1',
        zong: '$100',
        jin: '$100',
        sta: '1'
      }]
    }
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.list1()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  //计算属性
  computed: {},
  //方法
  methods: {
    cellclick(a) {
      console.log(a)
      this.$router.push({
        path: '/home/detail',
        query: {
          id: a.goodsId
        }
      })
    },
    is(a, b) {
      this.$postRequest("/api/orderReview/updateOrderReview", {
        userId: localStorage.getItem("userId"),
        status: b,
        reviewId: a.reviewId,
      }).then(res => {
        this.$message.success(res.msg)
        this.list1()
      })
    },
    list1() {
      this.$postRequest("/api/orderReview/getOrderReviewList", {
        userId: localStorage.getItem("userId"),
        pageNum: this.page,
        status: this.ind,
        pageSize: 10,
      }).then(res => {
        this.table = res.data.list
        this.total = res.data.total
      })
    },
    stab(i) {
      this.ind = i
      this.list1()
    },
    del(a) {
      this.$postRequest("/api/orderReview/deleteOrderReview", {
        userId: localStorage.getItem("userId"),
        reviewId: a.reviewId,
      }).then(res => {
        console.log('abc', res)
        this.$message.success(res.msg)
        this.list1()
      })
    },
    xiangqing(a, b) {
      this.dialog = true
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage
      this.list1()
    },
    tui() {
    },
  }
}
</script>
<style scoped lang="scss">
.in {
  width: 100%;
  // height: 840px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .color2 {
    color: #1a69e0;
  }
  .color1 {
    color: #f0740f;
  }
  .color3 {
    color: #e01a1a;
  }
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.sta {
          color: #1a69e0;
          position: relative;
          &::after {
            content: '';
            width: 100px;
            height: 2px;
            background: #1a69e0;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .ul2 {
      display: flex;
      align-items: center;
      position: relative;
      top: -56px;
      .one {
        padding-right: 20px;
      }
    }
  }
  .qie {
    .img1 {
      width: 50px;
      height: 50px;
    }
    /deep/ .el-button + .el-button {
      margin-top: 4px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 0px;
    }
    .aut {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 14px;
    }
    /deep/ .el-pagination button,
    .el-pagination span:not([class*='suffix']) {
      width: 60px;
    }
  }
  .dialog {
    /deep/ .el-step__main {
      height: 32px;
      .el-step__title {
        font-size: 14px;
        line-height: 34px;
      }
    }
    .zhuangtai {
      width: 100%;
      background: #f9f9f9;
      border: 1px solid #eeeeee;
      padding: 20px;
      &.na {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 20px;
        margin: 10px 0;
      }
      .a {
        height: 16px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
      }
      .b {
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
        margin-top: 8px;
      }
    }
    .wuliu {
      height: 36px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 36px;
    }
    .wuliu1 {
      width: 100%;
      height: 260px;
      background: #f9f9f9;
      border: 1px solid #eeeeee;
      padding: 20px;
      overflow-y: auto;
      .dizi {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-bottom: 18px;
      }
      .list {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
      }
    }
    .img2 {
      width: 50px;
      height: 50px;
    }
    .jia {
      height: 36px;
      line-height: 36px;
      text-align: right;
      & > span {
        margin-right: 20px;
        span {
          font-size: 18px;
          color: #ff0000;
        }
      }
    }
    .di {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 36px;
    }
    .one1 {
      width: 100%;
      height: 30px;
      background: rgba(255, 81, 12, 0.1);
      border: 1px solid #ff510c;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ff510c;
    }
    .one2 {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1a69e0;
    }
  }
  .dialog2 {
    /deep/ .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid #eeeeee;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-rate__icon {
      font-size: 22px;
    }
    .pingshang {
      display: flex;
      justify-content: center;
      align-items: center;
      .left {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        border: 1px solid #eee;
      }
      .right {
        flex: 1;
        .a {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 20px;
          margin-bottom: 10px;
        }
        .b {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 20px;
          margin-bottom: 14px;
        }
        .block {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .text {
    margin: 30px 0 20px;
  }
  .a {
    width: 100%;
    .addimg {
      width: 110px;
      height: 110px;
      border-radius: 4px;
    }
    .b {
      /deep/ .el-upload--picture-card {
        background-color: #fbfdff;
        border-radius: 6px;
        box-sizing: border-box;
        width: 110px;
        height: 110px;
        border: none;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        width: 110px;
        height: 110px;
        border: none;
        border-radius: 4px;
      }
    }
  }
}
</style>